<template>
  <div class="page-login-index">
    <el-form
    ref="loginForm"
    :model="form"
    class="login-form"
    label-width="0"
  >
    <div class="logo align-center p-b-15"><img :src="$icon.logo2" height="50px" /></div>
    <!-- <h4 class="align-center">登录</h4> -->
    <el-form-item prop="userName">
      <el-input
        v-model="form.username"
        size="larger"
        auto-complete="off"
        placeholder="请输入用户名"
        @keyup.enter.native="submitLogin"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        :type="passwordType"
        v-model="form.password"
        size="larger"
        auto-complete="off"
        placeholder="请输入密码"
        @keyup.enter.native="submitLogin"
      >
        <span slot="suffix" class="el-input__icon" @click="showPassword">
          <img :src="$icon.eyeClose" style="width:14px;float:left;margin-top:10px;" v-if="passwordType == 'password'" />
          <img :src="$icon.eyeOpen" style="width:14px;float:left;margin-top:8px;" v-else />
        </span>        
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        size="larger"
        class="btn-submit"
        @click.native.prevent="submitLogin"
      >登录</el-button>
    </el-form-item>
    <div class="flex-block">
      <el-checkbox v-model="form.checked" >记住密码</el-checkbox>
      <el-link @click="$refs.findPassword.init()">忘记密码</el-link>
    </div>
  </el-form>
  <find-password ref="findPassword" />
  </div>
</template>

<script>
import findPassword from './components/findPassword';
export default {
  data(){
    return{
      passwordType: "password",
      form:{
        username: null,
        password: null,
        checked: true
      },
    }
  },
  components:{
    findPassword,
  },
  created(){
    let loginInfo = localStorage.getItem('loginInfo');
    if(JSON.parse(loginInfo)){
      this.form.username = JSON.parse(loginInfo).username;
      this.form.password = JSON.parse(loginInfo).password;
    }
    this.getCaptcha();
  },
  methods:{
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    getCaptcha(){
      this.$request('get', '/web/index.php?r=site/pic-captcha&refresh=true', {}, (data,msg) => {
        this.picCaptcha = data.url;
      })
    },
    submitLogin(){
      // this.$store.dispatch("LoginByUsername", this.form).then(() => {
      //   let lastest_page = this.$store.getters.lastestPage || '/';
      //   this.$router.push({ path: lastest_page });
      // });
      let form = JSON.parse(JSON.stringify(this.form));
      
      this.$request('post', '/web/index.php?r=admin/passport/login', {formData: {user_type: 2, mall_id: 'MQ==',form: this.form} }, (data,msg) => {
        this.$store.commit('SET_ACCESS_TOKEN', data.accessToken);
        let lastest_page = this.$store.getters.lastestPage || '/';
        this.$router.push({ path: lastest_page });
        if(this.form.checked){
          localStorage.setItem('loginInfo', JSON.stringify(this.form));
        }
        this.getUserInfo();
      });
    },
    getUserInfo(){
      this.$request('get', '/web/index.php?r=mall/index/header-bar&_mall_id=1', {}, (data,msg) => {
        console.log(data);
        this.$store.commit('SET_USER_INFO', data.user);
        // this.$store.commit('SET_ROLES', data.roles || []);
        // this.$store.commit('SET_PERMISSIONS', data.permissions || []);
        let lastest_page = this.$store.getters.lastestPage || '/';
        this.$router.push({ path: lastest_page });
      });
    }
  }
}
</script>

<style>

</style>